<template>
    <div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon1.png" style="width: 24px;height: 18px;margin-right: 4px;">
                    <span>入职信息</span>
                </div>
                <div class="topBtn">
                    <div class="topBtnItem" @click="changeEdit1" v-if="!is_edit1">
                        编辑
                    </div>
                    <div class="topBtnItem2" @click="saveEdit1" style="margin-right: 12px;" v-if="is_edit1">
                        保存
                    </div>
                    <div class="topBtnItem" @click="is_edit1 = false" v-if="is_edit1">
                        取消
                    </div>
                </div>
            </div>
            <el-form ref="ruleFormRef" :inline="true" label-position="right" label-width="170px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem" prop="hired_time" label="入职时间：">
                    <span v-if="!is_edit1">{{ user.hired_time }}</span>
                    <el-date-picker v-if="is_edit1" v-model="user.hired_time" value-format="YYYY-MM-DD" type="date"
                        placeholder="选择入职时间" :disabled-date="disabledDate" />
                </el-form-item>
                <el-form-item class="formItem" prop="job_mode" label="用工模式：">
                    <span v-if="!is_edit1">{{ user.job_mode }}</span>
                    <el-select v-if="is_edit1" v-model="user.job_mode" placeholder="用工模式">
                        <el-option v-for="item in job_modeoptions" :key="item.name" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formItem" prop="dept_id" label="部门：">
                    <span v-if="!is_edit1">{{ user.dept_name }}</span>
                    <el-cascader v-if="is_edit1" :options="deptoptions" :props="props1" clearable v-model="user.dept_id"
                        @change="handleChange" ref="selectedArrRef" />
                </el-form-item>
                <el-form-item class="formItem" prop="position" label="岗位：">
                    <span v-if="!is_edit1">{{ user.position }}</span>
                    <el-input v-if="is_edit1" v-model="user.position" placeholder="岗位" clearable />
                </el-form-item>
                <el-form-item class="formItem" prop="LabortrialMonth" label="司龄：">
                    <span v-if="!is_edit1">{{ user.LabortrialMonth }}个月</span>
                    <el-input v-if="is_edit1" v-model="user.LabortrialMonth" placeholder="司龄" clearable disabled />
                </el-form-item>
                <el-form-item class="formItem" prop="probation_salary" label="试用期薪资：">
                    <span v-if="!is_edit1">{{ user.probation_salary }}</span>
                    <el-input v-if="is_edit1" v-model="user.probation_salary" placeholder="试用期薪资" clearable />
                </el-form-item>
                <el-form-item class="formItem" prop="become_salary" label="转正薪资：">
                    <span v-if="!is_edit1">{{ user.become_salary }}</span>
                    <el-input v-if="is_edit1" v-model="user.become_salary" placeholder="转正薪资" clearable />
                </el-form-item>
                <el-form-item class="formItem" prop="labortrial" label="试用期：">
                    <span v-if="!is_edit1">{{ user ? labortrialoptions[user.labortrial]?.name : '' }}</span>
                    <el-select v-if="is_edit1" v-model="user.labortrial" placeholder="试用期">
                        <el-option v-for="item in labortrialoptions" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formItem" prop="labor_start" label="劳动合同开始时间：">
                    <span v-if="!is_edit1">{{ user.labor_start }}</span>
                    <el-date-picker v-if="is_edit1" v-model="user.labor_start" value-format="YYYY-MM-DD" type="date"
                        placeholder="选择劳动合同开始时间" />
                </el-form-item>
                <el-form-item class="formItem" prop="laborType" label="劳动合同期：">
                    <span v-if="!is_edit1">{{ user ? laborTypeoptions[user.laborType]?.name : '' }}</span>
                    <!-- <div v-if="is_edit1"> -->
                    <el-input v-if="user.laborTypename === '自定义合同期限' && is_edit1" v-model="user.laborType"
                        placeholder="劳动合同期" clearable />
                    <el-select v-model="user.laborType" placeholder="劳动合同期" @change="getlaborTypename"
                        v-if="user.laborTypename !== '自定义合同期限' && is_edit1">
                        <el-option v-for="item in laborTypeoptions" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                    <!-- </div> -->
                </el-form-item>
                <el-form-item class="formItem" prop="email" label="企业邮箱：">
                    <span v-if="!is_edit1">{{ user.email }}</span>
                    <el-input v-if="is_edit1" v-model="user.email" placeholder="企业邮箱" clearable />
                </el-form-item>
                <el-form-item class="formItem" prop="labor_end" label="劳动合同结束时间：">
                    <span v-if="!is_edit1">{{ user.labor_end }}</span>
                    <el-date-picker v-if="is_edit1" v-model="user.labor_end" value-format="YYYY-MM-DD" type="date"
                        placeholder="选择劳动合同结束时间" />
                </el-form-item>
                <el-form-item class="formItem1" prop="job_status" label="员工状态：">
                    <span v-if="!is_edit1">{{ jobstatusoptions[user.job_status - 1]?.name }}</span>
                    <el-select v-if="is_edit1" v-model="user.job_status" placeholder="员工状态">
                        <el-option v-for="item in jobstatusoptions" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-alert style="margin: 0px;" title="根据劳动合同法规定：劳动合同期限一年以上不满三年的，试用期不得超过二个月。" type="error" :closable="false"
                show-icon>
                <template #icon>
                    <WarningFilled />
                </template>
            </el-alert>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon6.png" style="width: 18px;height: 16px;margin-right: 4px;">
                    <span>劳动合同</span>
                </div>
            </div>
            <div class="btnBox">
                <div style="flex: 1;">
                    <button :class="htIndex == 0 ? 'uploadBtn' : 'uploadBtn1'" style="margin-right: 24px;"
                        @click="setListOnline">
                        线上合同
                    </button>
                    <button :class="htIndex == 1 ? 'uploadBtn' : 'uploadBtn1'" @click="setListOffline">
                        线下合同
                    </button>
                </div>
                <button class="topBtnItem1" @click="open = true">
                    上传合同
                </button>
            </div>
            <div style="margin-left: 28px;" v-if="htIndex == 0">
                <el-table :data="tableData" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="task_name" label="合同名称" align="center" />
                    <el-table-column prop="type" label="合同类型" align="center">
                        <template #default="{ row }">
                            <span>劳动合同(入职)</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sign_time" label="签署时间" align="center" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button link type="primary" size="large" @click.stop="lookFile(row)">
                                查看
                            </el-button>
                            <el-button link type="primary" size="large" @click.stop="downloadFile1(row)">
                                下载
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total" :current-page="pageInfo.page"
                    :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" /> -->
            </div>
            <div style="margin-left: 28px;" v-if="htIndex == 1">
                <el-table :data="tableData" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="filename" label="合同名称" align="center" />
                    <el-table-column prop="type" label="合同类型" align="center">
                        <template #default="{ row }">
                            <span>{{ row.type == 3 ? '劳动合同' : '' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="上传时间" align="center" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button link type="primary" size="large" @click.stop="downloadFile(row)">
                                下载
                            </el-button>
                            <el-button link type="primary" size="large" @click.stop="deleteFiles(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total" :current-page="pageInfo.page"
                    :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" /> -->
            </div>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon12.png" style="width: 18px;height: 18px;margin-right: 4px;">
                    <span>转正记录</span>
                </div>
            </div>
            <el-form ref="ruleFormRef3" :inline="true" label-position="right" label-width="150px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem" label="转正时间：" prop="become_time">
                    <span>{{ user.become_time }}</span>
                </el-form-item>
                <el-form-item class="formItem" label="操作人：" prop="become_handle_user_name">
                    <span>{{ user.become_handle_user_name }}</span>
                </el-form-item>
                <el-form-item class="formItem" label="操作时间：" prop="become_handle_time">
                    <span>{{ user.become_handle_time }}</span>
                </el-form-item>
                <el-form-item class="formItem1" label="备注：" style="width: 100%;">
                    <span>{{ user.become_desc }}</span>
                </el-form-item>
            </el-form>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon13.png" style="width: 18px;height: 19px;margin-right: 4px;">
                    <span>简历信息</span>
                </div>
                <div class="topBtn" @click="editJl">
                    <div class="topBtnItem">
                        编辑
                    </div>
                </div>
            </div>
            <div class="noteBox" style="margin-top: 24px;">
                <div class="boxTitle">工作经历</div>
                <div class="infoBox">
                    <div v-for="(item, index) in jlListType1" class="infoItemBox" :key="index"
                        :style="{ marginBottom: index == jlListType1.length - 1 ? '0px' : '42px' }">
                        <div class="infoItem">
                            <span class="infoTitle">公司名称：</span>
                            <span class="infoValue">{{ item.title }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">工作岗位：</span>
                            <span class="infoValue">{{ item.role_name }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">入职时间：</span>
                            <span class="infoValue">{{ item.start_time }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">离职时间：</span>
                            <span class="infoValue">{{ item.end_time }}</span>
                        </div>
                        <div class="infoItem1">
                            <span class="infoTitle">工作内容：</span>
                            <span class="infoValue">{{ item.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="noteBox">
                <div class="boxTitle">项目经历</div>
                <div class="infoBox">
                    <div v-for="(item, index) in jlListType2" class="infoItemBox" :key="index"
                        :style="{ marginBottom: index == jlListType2.length - 1 ? '0px' : '42px' }">
                        <div class="infoItem">
                            <span class="infoTitle">项目名称：</span>
                            <span class="infoValue">{{ item.title }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">担任角色：</span>
                            <span class="infoValue">{{ item.role_name }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">开始时间：</span>
                            <span class="infoValue">{{ item.start_time }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">结束时间：</span>
                            <span class="infoValue">{{ item.end_time }}</span>
                        </div>
                        <div class="infoItem1">
                            <span class="infoTitle">项目内容：</span>
                            <span class="infoValue">{{ item.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="noteBox">
                <div class="boxTitle">教育经历</div>
                <div class="infoBox">
                    <div v-for="(item, index) in jlListType3" class="infoItemBox" :key="index"
                        :style="{ marginBottom: index == jlListType3.length - 1 ? '0px' : '42px' }">
                        <div class="infoItem">
                            <span class="infoTitle">学校名称：</span>
                            <span class="infoValue">{{ item.title }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">取得学历：</span>
                            <span class="infoValue">{{ item.role_name }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">开始时间：</span>
                            <span class="infoValue">{{ item.start_time }}</span>
                        </div>
                        <div class="infoItem">
                            <span class="infoTitle">结束时间：</span>
                            <span class="infoValue">{{ item.end_time }}</span>
                        </div>
                        <div class="infoItem1">
                            <span class="infoTitle">主修课程：</span>
                            <span class="infoValue">{{ item.content }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- style="border-bottom: 0px solid #eaeaea;" -->
        <el-dialog v-model="open" title="上传合同" width="646" :before-close="handleClose">
            <el-form ref="ruleFormRef1" label-position="right" label-width="150px" :model="htForm" class="form-inline"
                style="display: flex;align-items: center;">
                <el-form-item class="formItem2" label="选择上传文件：" height="160">
                    <el-upload ref="uploadBox" class="upload-demo" drag name="file" :auto-upload="false"
                        :data="{ id: user.id, type: 3 }" :headers="{ token: token }"
                        action="https://demo-api.niuyuwang.com/hr/user/save_file" :on-success="uploadFileSuccess"
                        :on-error="uploadFileFail" :before-upload="beforeAvatarUpload">
                        <img src="../../../assets/image/zxl/icon14.png" style="width: 32px;height: 32px;">
                        <div class="tip1">点击或拖拽上传</div>
                        <div class="tip2">文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="uploadFile">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog ref="jlDialog" v-model="open1" title="简历信息" width="892" :before-close="handleClose">
            <el-form ref="ruleFormRef2" :inline="true" label-position="right" label-width="150px" :model="form2"
                :rules="rules" class="form-inline">
                <div class="jlClass">
                    <div class="pClass">
                        <span class="title">工作经历</span>
                        <span class="add" @click="addItem(1)">添加</span>
                    </div>
                    <div v-for="(item, index) in typeItem1" :key="index" class="itemClass">
                        <div style="text-align: right;">
                            <el-button type="primary" round text="primary" :icon="Delete"
                                @click="deleteIndex(item.originalIndex)">删除</el-button>
                        </div>
                        <el-form-item class="formItem" label="公司名称：">
                            <el-input v-model="item.title" placeholder="请输入公司名称" />
                        </el-form-item>
                        <el-form-item class="formItem" label="工作岗位：">
                            <el-input v-model="item.role_name" placeholder="请输入工作岗位" />
                        </el-form-item>
                        <el-form-item class="formItem" label="入职时间：">
                            <el-date-picker v-model="item.start_time" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" placeholder="请选择入职时间">
                            </el-date-picker> </el-form-item>
                        <el-form-item class="formItem" label="离职时间：">
                            <el-date-picker v-model="item.end_time" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" placeholder="请选择离职时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="formItem1" label="工作内容：">
                            <el-input v-model="item.content" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea"
                                placeholder="请输入工作内容" />
                        </el-form-item>
                    </div>
                </div>
                <div class="jlClass">
                    <div class="pClass">
                        <span class="title">项目经历</span>
                        <span class="add" @click="addItem(2)">添加</span>
                    </div>
                    <div v-for="(item, index) in typeItem2" :key="index" class="itemClass">
                        <div style="text-align: right;">
                            <el-button type="primary" round text :icon="Delete"
                                @click="deleteIndex(item.originalIndex)">删除</el-button>
                        </div>
                        <el-form-item class="formItem" label="项目名称：">
                            <el-input v-model="item.title" placeholder="请输入项目名称" />
                        </el-form-item>
                        <el-form-item class="formItem" label="担任角色：">
                            <el-input v-model="item.role_name" placeholder="请输入担任角色" />
                        </el-form-item>
                        <el-form-item class="formItem" label="开始时间：">
                            <el-date-picker v-model="item.start_time" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" placeholder="请选择开始时间">
                            </el-date-picker> </el-form-item>
                        <el-form-item class="formItem" label="结束时间：">
                            <el-date-picker v-model="item.end_time" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" placeholder="请选择结束时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="formItem1" label="项目内容：">
                            <el-input v-model="item.content" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea"
                                placeholder="请输入项目内容" />
                        </el-form-item>
                    </div>
                </div>
                <div class="jlClass">
                    <div class="pClass">
                        <span class="title">教育经历</span>
                        <span class="add" @click="addItem(3)">添加</span>
                    </div>
                    <div v-for="(item, index) in typeItem3" :key="index" class="itemClass">
                        <div style="text-align: right;">
                            <el-button type="primary" round text :icon="Delete"
                                @click="deleteIndex(item.originalIndex)">删除</el-button>
                        </div>
                        <el-form-item class="formItem" label="学校名称：">
                            <el-input v-model="item.title" placeholder="请输入学校名称" />
                        </el-form-item>
                        <el-form-item class="formItem" label="取得学历：">
                            <el-select v-model="item.role_name" placeholder="请选择取得学历" size="default">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.label" />
                            </el-select>
                        </el-form-item>
                        <el-form-item class="formItem" label="开始时间：">
                            <el-date-picker v-model="item.start_time" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" placeholder="请选择开始时间">
                            </el-date-picker> </el-form-item>
                        <el-form-item class="formItem" label="结束时间：">
                            <el-date-picker v-model="item.end_time" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" placeholder="请选择结束时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="formItem1" label="主修课程：">
                            <el-input v-model="item.content" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea"
                                placeholder="请输入课程内容" />
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open1 = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="confirmUp">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, defineEmits } from '@/TUIKit/adapter-vue';
import type { FormInstance, FormRules, UploadProps, ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { save_jobinfo, getjobmode, getDepartmentlist } from "@/api/cf";
import { save_resumesub, getResume, getFileList,getOnlineFileList, deleteFile } from "@/api/xl";
const props = defineProps({
    user: {
        type: Object,
        default: () => ({}) // 对象/数组默认值需返回函数
    }
})
onMounted(() => {
    console.log(props.user)
    getjobmode().then(res => {
        job_modeoptions.value = res.data;
    });
    getDepartmentlist().then(res => {
        deptoptions.value = res.data;
    });
    setTimeout(() => {
        getJlInfo()
        getList()
    }, 1000)
});
interface RuleForm {
    hired_time: string
    job_mode: string
    dept_id: string
    position: string
    LabortrialMonth: string
    probation_salary: string
    become_salary: string
    labortrial: string
    labor_start: string
    laborType: string
    email: string
    labor_end: string
    job_status: string
    become_time: string
    become_handle_user: string
    become_handle_time: string
    become_desc: string
}

interface RuleForm1 {
    type: number,
    title: string,
    role_name: string,
    start_time: string,
    end_time: string,
    content: string,
    originalIndex: number
}

const props1 = reactive({
    checkStrictly: true,
    emitPath: false,
    multiple: false,
    value: "id",
    label: "name",
    children: "children",
});
const jobstatusoptions = ref([
    { value: 1, name: "试用" },
    { value: 2, name: "正式" },
    { value: 3, name: "待离职" },
    { value: 4, name: "已离职" },
]);
const laborTypeoptions = ref([
    { value: 0, name: "无固定期限" },
    { value: 1, name: "6个月" },
    { value: 2, name: "12个月" },
    { value: 3, name: "24个月" },
    { value: 4, name: "36个月或以上" },
    { value: 5, name: "自定义合同期限" },
]);
const labortrialoptions = ref([
    { value: 0, name: "无试用期" },
    { value: 1, name: "1个月" },
    { value: 2, name: "2个月" },
    { value: 3, name: "3个月" },
    { value: 4, name: "4个月" },
    { value: 5, name: "5个月" },
    { value: 6, name: "6个月" },
]);
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}

const htIndex = ref(0)
const emits = defineEmits(['updateData']);
const uploadBox = ref(null)
const open = ref(false)
const token = localStorage.getItem('token')
const htForm = ref(null)
const jlList = ref([])
const jlListType1 = ref([])
const jlListType2 = ref([])
const jlListType3 = ref([])
const typeItem1 = ref([])
const typeItem2 = ref([])
const typeItem3 = ref([])
const form2 = ref([])
const open1 = ref(false)
const ruleFormRef = ref(null)
const ruleFormRef1 = ref(null)
const ruleFormRef2 = ref(null)
const ruleFormRef3 = ref(null)
const selectedArrRef = ref(null);
const is_edit1 = ref(false)
const deptoptions = ref([]);
const job_modeoptions = ref([]);
const options = reactive([{
    label: '小学',
    value: '1'
}, {
    label: '初中',
    value: '2'
}, {
    label: '高中',
    value: '3'
}, {
    label: '中专',
    value: '4'
}, {
    label: '大专',
    value: '5'
}, {
    label: '本科',
    value: '6'
}, {
    label: '硕士',
    value: '7'
}, {
    label: '博士',
    value: '8'
}])

const form1 = reactive({
    url: ''
})

const tableData = ref([])
const total = ref(100)
const pageInfo = reactive({
    page: 2,
    limit: 10
})
const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.page = page
    pageInfo.limit = size
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log(rawFile)
    if (rawFile.type !== 'application/vnd.ms-excel' && rawFile.type !== 'application/x-zip-compressed' && rawFile.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && rawFile.type !== 'text/plain' && rawFile.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && rawFile.type !== 'application/msword' && rawFile.type !== 'application/pdf' && rawFile.type !== 'application/zip') {
        ElMessage.error('文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"')
        return false
    }
    return true
}

const rules = reactive<FormRules<RuleForm>>({
    hired_time: [{ required: true, message: '请选择入职时间', trigger: 'change' }],
    job_mode: [{ required: true, message: '请选择用工模式', trigger: 'change' }],
    dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
    probation_salary: [{ required: true, message: '请输入试用期薪资', trigger: 'blur' }],
    become_salary: [{ required: true, message: '请输入转正薪资', trigger: 'blur' }],
    labortrial: [{ required: true, message: '请选择试用期', trigger: 'change' }],
    labor_start: [{ required: true, message: '请选择劳动合同开始时间', trigger: 'change' }],
    labor_end: [{ required: true, message: '请选择劳动合同结束时间', trigger: 'change' }],
    laborType: [{ required: true, message: '请选择劳动合同期', trigger: 'change' }],
    job_status: [{ required: true, message: '请选择员工状态', trigger: 'change' }],
    become_time: [{ required: true, message: '转正时间', trigger: 'change' }],
    become_handle_user: [{ required: true, message: '操作人', trigger: 'change' }],
    become_handle_time: [{ required: true, message: '操作时间', trigger: 'change' }]
})

const setListOnline = () => {
    htIndex.value = 0;
    getList()
}

const setListOffline = () => {
    htIndex.value = 1;
    getList()
}

const uploadFile = () => {
    uploadBox.value!.submit();
}
const uploadFileSuccess = () => {
    ElMessage({
        message: '上传成功',
        grouping: true,
        type: "success",
    });
    uploadBox.value!.clearFiles()
    open.value = false;
    setTimeout(() => {
        getList()
    }, 500)
}
const uploadFileFail = () => {
    ElMessage({
        message: '上传失败',
        grouping: true,
        type: "success",
    });
    uploadBox.value!.clearFiles()
    open.value = false;
    setTimeout(() => {
        getList()
    }, 500)
}
const getList = () => {
    if (htIndex.value == 0) {
        getOnlineFileList({
            id: props.user.id,
            type: 1
        }).then(res => {
            tableData.value = res.data
        });
    } else if (htIndex.value == 1) {
        getFileList({
            id: props.user.id,
            type: 3
        }).then(res => {
            tableData.value = res.data
        });
    }
}
const downloadFile = (row) => {
    const url = row.url; // 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = row.filename; // 自定义下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const downloadFile1 = (row) => {
    const url = row.downloadUrl; // 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = row.filename; // 自定义下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const lookFile = (row) => {
    if(row.previewUrl){
        window.open(row.previewUrl, "_blank");
    }
}
const deleteFiles = (row) => {
    ElMessageBox.confirm("是否确定删除?", "操作提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
        if (action === "confirm") {
            deleteFile({
                id: row.id
            }).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                getList()
            });
        }
    });
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
const getJlInfo = () => {
    getResume({ id: props.user.id }).then(res => {
        jlList.value = res.data
        jlListType1.value = jlList.value.filter(item => item.type == 1)
        jlListType2.value = jlList.value.filter(item => item.type == 2)
        jlListType3.value = jlList.value.filter(item => item.type == 3)
    });
}
const editJl = () => {
    form2.value = jlList.value.map((item, index) => ({
        ...item,
        originalIndex: index
    }))
    typeItem1.value = form2.value.filter(item => item.type == 1)
    typeItem2.value = form2.value.filter(item => item.type == 2)
    typeItem3.value = form2.value.filter(item => item.type == 3)
    open1.value = true
}
const handleChange = (value) => {
    selectedArrRef.value.togglePopperVisible();
    console.log(value); // 输出当前选择的值，可以是任意一级的ID数组
}
const getlaborTypename = (val) => {
    const result = laborTypeoptions.value.find(item => item.value === val);
    props.user.value.laborTypename = result.name;
}
const handleClose = (done: () => void) => {
    done()
}
const deleteIndex = (originalIndex: number) => {
    form2.value.splice(originalIndex, 1);
    form2.value.forEach((item, newIndex) => {
        item.originalIndex = newIndex;
    });
    typeItem1.value = form2.value.filter(item => item.type == 1)
    typeItem2.value = form2.value.filter(item => item.type == 2)
    typeItem3.value = form2.value.filter(item => item.type == 3)
    // console.log(typeItem1)
}
const addItem = (type: number) => {
    if (type == 1) {
        form2.value.push({
            type: 1,
            title: '',
            role_name: '',
            start_time: '',
            end_time: '',
            content: '',
            originalIndex: form2.length
        })
    }
    if (type == 2) {
        form2.value.push({
            type: 2,
            title: '',
            role_name: '',
            start_time: '',
            end_time: '',
            content: '',
            originalIndex: form2.length
        })
    }
    if (type == 3) {
        form2.value.push({
            type: 3,
            title: '',
            role_name: '',
            start_time: '',
            end_time: '',
            content: '',
            originalIndex: form2.length
        })
    }
    typeItem1.value = form2.value.filter(item => item.type == 1)
    typeItem2.value = form2.value.filter(item => item.type == 2)
    typeItem3.value = form2.value.filter(item => item.type == 3)
}
// const typeItem1 = computed(() =>
//     form2.filter(item => item.type == 1)
// );
// const typeItem2 = computed(() =>
//     form2.filter(item => item.type == 2)
// );
// const typeItem3 = computed(() =>
//     form2.filter(item => item.type == 3)
// );
const confirmUp = () => {
    console.log(form2)
    form2.value.forEach(item => {
        // 直接删除对象属性
        delete item.originalIndex
    })
    save_resumesub({
        list: form2.value,
        id: props.user.id
    }).then(res => {
        ElMessage({
            message: res.msg,
            grouping: true,
            type: "success",
        });
        open1.value = false;
        getJlInfo()
    });
}
const changeEdit1 = () => {
    is_edit1.value = true
}
const saveEdit1 = () => {
    ruleFormRef.value.validateField(["hired_time", "job_mode", "dept_id", "probation_salary", "become_salary", "labortrial", "labor_start", "labor_end", "laborType", "job_status"], res => {
        if (res) {
            // delete props.user.value.laborTypename;
            console.log("表单验证成功");
            save_jobinfo({
                id: props.user.id,
                hired_time: props.user.hired_time,
                job_mode: props.user.job_mode,
                dept_id: props.user.dept_id,
                position: props.user.position,
                probation_salary: props.user.probation_salary,
                become_salary: props.user.become_salary,
                labortrial: props.user.labortrial,
                laborType: props.user.laborType,
                labor_start: props.user.labor_start,
                labor_end: props.user.labor_end,
                email: props.user.email,
                job_status: props.user.job_status
            }).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                is_edit1.value = false
                emits('updateData');
            });
        } else {
            console.log("表单验证失败");
            return false;
        }
    });
}
defineExpose({
    changeEdit1
})
</script>

<style lang="scss" scoped>
.el-button.is-text:not(.is-disabled):hover {
    color: #fff;
}

::v-deep .el-form-item__label {
    font-size: 16px;
    /* 设置你需要的字体大小 */
}

::v-deep .el-form-item__content * {
    font-size: 16px;
    /* 设置你需要的字体大小 */
}

.upload-demo {
    width: 450px;

    ::v-deep .el-upload-dragger {
        background-color: #f7f7f7;
        width: 458px;
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .el-upload-list {
        width: 450px !important;
    }

    .tip1 {
        color: #666;
        font-size: 14px;
    }

    .tip2 {
        color: #999;
        font-size: 14px;
    }
}

.jlClass {
    padding: 24px 0;
    border-bottom: 1px solid #eaeaea;
    width: 100%;

    .pClass {
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom: 25px;

        .add {
            cursor: pointer;
            width: 42px;
            height: 30px;
            background-color: #01509f;
            color: #ffffff;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
        }

        .add:hover {
            transform: scale(1) translateY(-2px) !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .title {
            flex: 1;
            color: #01509f;
            font-size: 18px;
        }
    }

    .itemClass {
        padding: 8px 0;
        background-color: #f7f7f7;
        border-radius: 12px;
        margin-bottom: 4px;

        .formItem {
            width: 44%;
            margin-bottom: 27px;
        }

        .formItem1 {
            width: 92%;
        }

    }
}

.userInfo {
    padding: 12px 0 31px 0;
    border-bottom: 1px solid #eaeaea;
    // display: flex;
    // flex-wrap: wrap;

    .form-inline {
        margin-top: 32px;
        // display: flex;
        // flex-wrap: wrap;
        padding: 0 17px;

        .formItem {
            width: 31%;
            margin-bottom: 40px;
        }

        .formItem1 {
            width: 31%;
        }

        .formItem2 {
            display: flex;
            align-items: center;
        }

    }

    .noteBox {
        margin-left: 26px;

        .boxTitle {
            width: 100%;
            height: 40px;
            background-color: #f7f7f7;
            border-radius: 6px;
            color: #666666;
            font-size: 16px;
            text-align: left;
            line-height: 40px;
            padding-left: 13px;
        }

        .infoBox {
            min-height: 87px;
            width: 100%;
            padding: 26px 0;

            .infoItemBox {
                display: flex;
                flex-wrap: wrap;

                .infoItem {
                    width: 50%;
                    display: flex;
                    align-items: center;
                    margin-bottom: 42px;

                    .infoTitle {
                        font-size: 16px;
                        color: #666;
                        flex-shrink: 0
                    }

                    .infoValue {
                        font-size: 16px;
                        color: #333;
                    }
                }

                .infoItem1 {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;

                    .infoTitle {
                        font-size: 14px;
                        color: #666;
                        flex-shrink: 0
                    }

                    .infoValue {
                        font-size: 14px;
                        color: #333;
                    }
                }
            }
        }
    }

    .topBox {
        display: flex;
        align-items: center;

        .topTitle {
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 16px;
            color: #01509f;
        }

        .topBtn {
            display: flex;
            align-items: center;

            .topBtnItem {
                cursor: pointer;
                width: 42px;
                height: 30px;
                color: #01509f;
                border: 1px solid #01509f;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
            }

            .topBtnItem2 {
                cursor: pointer;
                width: 42px;
                height: 30px;
                background-color: #01509f;
                color: #ffffff;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
            }

            .topBtnItem2:hover {
                transform: scale(1) translateY(-2px) !important;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .topBtnItem:hover {
                transform: scale(1) translateY(-2px) !important;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }
        }
    }

    .btnBox {
        display: flex;
        align-items: center;
        margin: 19px 0 16px 28px;

        .uploadBtn {
            background-color: transparent;
            color: #01509f;
            width: 100px;
            height: 30px;
            border: 1px solid #01509f;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .uploadBtn1 {
            background-color: transparent;
            color: #999;
            width: 100px;
            height: 30px;
            border: 1px solid #999;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .topBtnItem1 {
            cursor: pointer;
            background-color: #01509f;
            color: #fff;
            width: 86px;
            height: 30px;
            border: 0px solid #eaeaea;
            font-size: 14px;
            border-radius: 6px;
            text-align: center;
            line-height: 30px;
        }

        .topBtnItem1:hover {
            transform: scale(1) translateY(-2px) !important;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    }


    .custom-table .el-table__header th {
        color: #666;
        font-size: 16px;
        font-weight: lighter;
    }
}
</style>
